<script setup>
/**
 * @/views/home/components/Slideshow.vue
 * 连播图组件
 */

/* 引入 */
import { ref, watch } from "vue";
import { useTownStore } from "@/stores/index.js";

/* 数据 */
const townStore = useTownStore();
const spotlist = ref([]);
const display = ref(false);

/* 侦听 */
watch(
  // 指定侦听的目标
  () => townStore.currentTown,
  // 发生改变时回调
  (newTown) => {
    if (newTown && newTown.spotlist) {
      spotlist.value = newTown.spotlist;
      display.value = true;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="slideshow">
    <el-card class="el-card" style="max-width: 100vw; height: 100%">
      <template #header>
        <p>小镇风景</p>
      </template>
      <el-carousel
        v-if="display"
        :interval="4000"
        type="card"
        height="10vw"
        indicator-position="none"
      >
        <el-carousel-item v-for="(item, index) in spotlist" :key="index">
          <!-- 显示图片 -->
          <el-image :src="item" :fit="'cover'" alt="Town Image" />
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<style scoped></style>
